<!-- 
  @name: 添加/编辑加注站
  @date: 2020.3.9
 -->
<template>
	<view class="content">
		<!-- 顶部输入区 -->
		<view class="top">
			<view class="list">
				<view class="left">加注站名称</view>
				<input class="int" placeholder="输入加注站名称" placeholder-class="phcolor" v-model.trim="info.siteName" />
			</view>
			<view class="list">
				<view class="left">详情地址</view>
				<input class="int" placeholder="输入详情地址" placeholder-class="phcolor" v-model.trim="info.siteAddress" />
			</view>
			<view class="list">
				<view class="left">地图标点</view>
				<view class="right" @tap="markSite">
					<text class="t">{{markText}}</text>
					<view class="arrow_nav"></view>
				</view>
			</view>
			<view class="list">
				<view class="left">服务电话</view>
				<input class="int" placeholder="输入服务电话" placeholder-class="phcolor" v-model.trim="info.contactPhone" />
			</view>
			<view class="list">
				<view class="left">尿素品牌</view>
				<input class="int" placeholder="输入尿素品牌" placeholder-class="phcolor" v-model.trim="info.siteBrand" />
			</view>
		</view>
		
		<!-- 选择图片区 -->
		<view class="middle">
			<view class="left">
				<view class="txt">
					<text>加注站</text>
					<text style="margin-top: 20rpx;">形象照片</text>
					<text style="margin-top: 20rpx;font-size: 22rpx;color: #aaa;">(不超过5张)</text>
				</view>
			</view>
			<view class="right">
				<view class="img" v-for="(item, index) in picList" :key="index">
					<image class="i" :src="item"></image>
					<view class="c" @tap="reduPic(item, index)"></view>
				</view>
				<view class="img icon" @tap="choosePic"></view>
			</view>
		</view>
		
		<!-- 提交按钮 -->
		<view class="btn_pub_blank"></view>
		<view class="btn_pub bottom" @tap="submit">保存</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {
					siteLat: '',
					siteLng: '',
					areaCode: ''
				},  //内容
				type: '',  //页面类型，默认为添加，若值为 e 则是编辑
				markText: '在地图上标记加注站位置',
				picList: [],  //照片
			}
		},
		onLoad(e) {
			this.type = e.type;
			if(this.type === 'e') {
				this.info = JSON.parse(this.$store.state.tmpData);
				this.$store.commit('setTmpData', '');
				this.markText = '已标记';
				if(this.info.siteImgs) {
					let arr = this.info.siteImgs.split(',');
					arr.forEach(item => {
						if(item) this.picList.push(item);
					});
				}
			}
			uni.$on('site_chooseMark', this.chooseMark);
		},
		onUnload() {
			uni.$off('site_chooseMark', this.chooseMark);
		},
		methods: {
			//监听选择位置
			chooseMark(e) {
				this.info.siteLat = e.latitude;
				this.info.siteLng = e.longitude;
				this.info.areaCode = e.areaCode;
				this.markText = '已标记';
			},
			//删除图片
			reduPic(item, index) {
				this.picList.splice(index, 1);
			},
			//选择图片
			choosePic() {
				if(this.picList.length >= 5) {
					return;
				}
				uni.chooseImage({
					count: 5 - this.picList.length,  //最多选择个数
					success: (data) => {
						let arr = data.tempFilePaths;
						arr.forEach(path => {
							this.$http({
								upload: true,
								filePath: path
							}).then(res => {
								this.picList.push(res);
							});
						});
					}
				});
			},
			//前往地图标记加注站
			markSite() {
				let url = './siteEditMap';
				if(this.info.siteLat) {
					url += '?latitude=' + this.info.siteLat + '&longitude=' + this.info.siteLng;
				}
				this.$navigateTo(url);
			},
			//提交数据
			submit2() {
				this.$http({
					url: this.$api.siteUrl + 'doupdatefillsite',
					data: {
						action: 0,
						siteId: !this.info.siteId ? '' : this.info.siteId,
						siteName: this.info.siteName,
						siteAddress: this.info.siteAddress,
						contactPhone: this.info.contactPhone,
						siteBrand: this.info.siteBrand,
						siteLat: parseFloat(this.info.siteLat),
						siteLng: parseFloat(this.info.siteLng),
						areaCode: this.info.areaCode,
						siteImgs: this.$arrToStr(this.picList)
					}
				}).then(res => {
					this.$successToast('保存成功！');
					setTimeout(() => {
						if(this.type === 'e') {
							uni.$emit('site_editSite', {});
						} else {
							uni.$emit('site_addSite', {});
						}
					}, this.$tmp.TIME_SUC);
					this.$sucBack();
				});
			},
			//提交数据-验证
			submit() {
				if(!this.info.siteName) {
					this.$showToast('请输入加注站名称！');
					return;
				}
				if(!this.info.siteAddress) {
					this.$showToast('请输入加注站地址！');
					return;
				}
				if(!this.info.contactPhone) {
					this.$showToast('请输入服务电话！');
					return;
				}
				if(!this.info.siteBrand) {
					this.$showToast('请输入尿素品牌！');
					return;
				}
				if(!this.info.siteLat || !this.info.siteLng) {
					this.$showToast('请在地图上确定标记点！');
					return;
				}
				if(this.picList.length === 0) {
					this.$showToast('请选择形象照片！');
					return;
				}
				this.submit2();
			}
		}
	}
</script>

<style lang="scss">
	/* 顶部输入区 */
	.top {
		width: 750rpx;
		background-color: $color-white;
		.list:last-child {
			border-bottom: none;
		}
		.list {
			width: 710rpx;
			height: 100rpx;
			margin-left: 40rpx;
			border-bottom: 1rpx solid $color-list;
			display: flex;
			flex-direction: row;
			align-items: center;
			.left {
				width: 260rpx;
				text-align: start;
				color: $color-grey-dark;
			}
			.int,
			.right {
				flex: 1;
				padding-right: 40rpx;
			}
			.right {
				display: flex;
				flex-direction: row;
				align-items: center;
				.t {
					flex: 1;
				}
			}
		}
	}
	
	/* 选择图片区 */
	.middle {
		width: 750rpx;
		margin-top: $spacing-col;
		background-color: $color-white;
		display: flex;
		flex-direction: row;
		.left {
			width: 252rpx;
			margin-left: 40rpx;
			display: flex;
			justify-content: start;
			.txt {
				color: $color-grey-dark;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}
		}
		.right {
			flex: 1;
			padding: 20rpx 0;
			.img {
				display: inline-block;
				position: relative;
				width: 120rpx;
				height: 120rpx;
				margin: 10rpx 8rpx;
				.i {
					width: 100%;
					height: 100%;
					border-radius: $border-radius-sm;
				}
				.c {
					position: absolute;
					top: -3rpx;
					right: -3rpx;
					width: 26rpx;
					height: 26rpx;
					background-image: url('http://img.etubang.com/group1/M00/00/41/rBCky15l7FyAcnkVAAAEiSf4WeE606.png');
				}
			}
			.img.icon {
				margin-bottom: 0;
				background-image: url('http://img.etubang.com/group1/M00/00/41/rBCky15l6cWABYxuAAASC_8JmJU725.png');
			}
		}
	}
	
</style>
